<template>
	<view>
		<!-- 顶部 -->
		<view style="position: fixed;left: 0rpx;right: 0rpx;top: 0rpx;z-index: 100;">
			<view :style="{height:statuBarHeight+'px'}" style="background-color: #2869FE;"></view>
			<view class="cflex-r"
				style="background-color: #2869FE;justify-content: center;align-items: center; height: 44px;position: relative">
				<view @click="fuxmAdd()" v-if="device==='WX'" class="u-font-12"
					style="background-color: #FFFFFF;position: absolute;border-radius: 15rpx;padding: 5rpx 20rpx 5rpx 20rpx;left:50rpx;">
					添加</view>
				<view @click="fuxmAdd()" v-else class="u-font-12"
					style="background-color: #FFFFFF;position: absolute;border-radius: 15rpx;padding: 5rpx 20rpx 5rpx 20rpx;right:50rpx;">
					添加</view>
				<text class="u-font-16" style="font-weight: 600;color: #fff;">服务项目</text>
			</view>
		</view>

		<view :style="{height:statuBarHeight+44+'px'}" class="u-m-b-35"></view>
		<!-- 内容(有) -->
		<view v-if="itemList.length!==0" class="cflex-r u-m-t-20 u-m-l-20 u-m-r-20 u-p-20" style="background-color: #FFFFFF;
		border-radius: 20rpx;position: relative;" v-for="(item,index) in itemList" :key="index">
			<view class="" style="background-color: #FB8500;position: absolute;right: 3%;padding:5rpx 8rpx ;color: #fff;
		border-radius: 12rpx;top: 2%;font-size: 24rpx;" @click.stop="openShow(item)">修改价格</view>
			<!-- 左半部分 -->
			<view class="cflex-r" style="flex: 1;" @tap="goDetail(item.iid)">
				<image :src="item.photo" style="width: 180rpx;height: 150rpx;border-radius:15rpx;" mode="aspectFill">
				</image>
				<!-- <image src="https://img0.baidu.com/it/u=1469525697,2186515336&fm=26&fmt=auto" style="width: 180rpx;height: 150rpx;border-radius:30rpx;"></image> -->
				<view class="cflex-c u-m-l-30" style="line-height: 48rpx;">
					<view class="u-font-16" style="font-weight: bold;">
						<text>{{item.name}}</text>
						<text class="u-m-l-15" style="color: #FB8500;">￥</text>
						<text style="color: #FB8500;">{{item.finalPrice}}</text>
					</view>
					<view class="u-font-12 u-line-1" style="color: #FB8500;
					width:300rpx;height:43rpx;">可选区间价格：{{item.disPrice}}~{{item.price}}</view>
					<view class="u-font-12 u-line-1" style="color: #A1A1A1;
					width:300rpx;height:43rpx;">{{item.itemDes}}</view>

					<view class="cflex-r u-font-12" style="align-items: center;color: #606060;">
						<image src="../static/qieTu/shijian.png" style="width: 25rpx;height: 25rpx;"></image>
						<text class="u-m-l-5">{{item.timeSpan}}小时</text>
						<text class="u-m-l-30">90天已售{{item.xiaoLiang}}</text>
					</view>
				</view>
			</view>
			<!-- 右半部分 -->
			<view class="cflex-c" style="justify-content: center;align-items: center;">
				<text v-if="item.statusValue" class="u-m-b-10" style="color: #FB8500;">已上架</text>
				<text v-else class="u-m-b-10" style="color: #BEBEBE;">已下架</text>
				<u-switch @change="change(item.id)" v-model="item.statusValue" active-color="#2869FE"
					inactive-color="#eee"></u-switch>
			</view>

		</view>
		<!-- 无内容显示 -->
		<view v-else class="cflex-c" style="align-items: center;">
			<image src="../static/queSheng.png" style="width: 100%;" mode="aspectFill"></image>
			<text class="u-font-16" style="font-weight: bold;">您还没有服务项目，赶紧添加吧</text>
		</view>


		<u-modal  v-model="show" showCancelButton :title="title" @confirm="confirm" @cancel="show=false">
			<view class="slot-content" style="display: flex;justify-content: center;margin-top: 30rpx;">
				<view class="input_box">
					<input placeholder="请输入价格" v-model="finalPrice"></input>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				itemList: [],
				id: '',
				finalPrice:'请输入价格',
				device: "APP", //表示当前运行的平台
				show: false,
				title: ''
			}
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			this.device = "WX"
			//#endif
		},
		onShow() {
			this.itemList = []
			let isLogin = this.$store.state.isLogin;
			if (isLogin == true) {
				this.httpRequest();
			} else {
				return;
			}
		},
		methods: {
			async confirm() {
				let that = this 
				if (this.finalPrice < this.min || this.finalPrice > this.max) {
					uni.showToast({
						title: '请填写对应区间价格',
						icon: 'none'
					})
					return false
				}
				let res = await this.$request("worker/item/editItem", {
					id: this.itemId,
					finalPrice: this.finalPrice
				}).then(res => {
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
					setTimeout(()=>{
						
						that.httpRequest()
					},1000)
				})
			},
			openShow(item) {
				console.log(11111)
				this.itemId = item.id
				this.title = item.name
				this.max = item.price
				this.min = item.disPrice
				this.show = true
			},
			goDetail(id) {
				console.log(id);
				uni.navigateTo({
					url: `../pagesB/order/goods_detail?id=${id}`
				})
			},
			httpRequest() {
				this.itemList = []
				this.$request("worker/item/myItemList", {}).then(res => {
					console.log("my", res)
					res.data.forEach((obj) => {
						obj.params.item.wid = obj.wid;
						obj.params.item.status = obj.status;
						obj.params.item.statusValue = obj.status === 1 ? true : false;
						obj.params.item.id = obj.id
						obj.params.item.iid = obj.iid
						obj.params.item.finalPrice = obj.finalPrice
						this.itemList.push(obj.params.item);
					})


					console.log("log", this.itemList)
					// //console.log(res.data)
				});
			},
			fuxmAdd() { //添加界面
				uni.navigateTo({
					url: '../pagesB/fuxmAdd/fuxmAdd?itemId=',
					fail(res) {
						// //console.log(res)
					}
				});
			},
			change(itemId) { //u-switch触发
				//console.log("st",itemId)
				this.$request("worker/item/openOrCloseItem", {
					id: itemId
				}).then(res => {
					//console.log("close======>",res);
					// this.itemList = [];
					// this.httpRequest();
				})
			}
		},
		computed: {
			statuBarHeight() {
				return this.$store.state.sysInfo.statusBarHeight;
			}
		}
	}
</script>

<style>
.input_box{
		border: 1rpx solid #e5e5e5;
		border-radius: 15rpx;
		width: 500rpx;
		margin-top: 15rpx;
		padding: 10rpx;
	}
</style>